<template>
  <div class="_p20">
    <com-data-select @comChange="initDataList()" />
    <el-tabs class="_m-t-10" type="border-card" v-model="tabIndex">
      <el-tab-pane label="数据表">
        <el-table :data="dataList" style="width: 100%">
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="dataLength" label="数据长度" />
          <el-table-column prop="engine" label="策略引擎" />
          <el-table-column prop="memo" label="备注信息" />
          <el-table-column prop="schema" label="表空间" />
          <el-table-column prop="tableRows" label="行数" />
          <el-table-column prop="version" label="版本" />
          <el-table-column label="操作">
            <el-button type="primary" size="small">分析</el-button>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="数据统计">
        <div
          class="_cart _box-800p _m-auto _m-t-10 _wrapper-x _p20"
          id="tableRows"
          ref="tableRows"
        ></div>
        <div
          class="_cart _box-800p _m-auto _m-t-10 _wrapper-x _p20"
          id="dataLength"
          ref="dataLength"
        ></div>
        <div
          class="_cart _box-800p _m-auto _m-t-10 _wrapper-x _p20"
          id="createTime"
          ref="createTime"
        ></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ToolEharts from "@/tool/tool-echarts.js";
import ToolHttpClient from "@/tool/http/tool-axios";
import ComDataSelect from "@/components/com-data-select/com-data-select.vue";

export default {
  components: {
    ComDataSelect,
  },
  data() {
    return {
      dataList: [],
      tabIndex: "0",
    };
  },
  watch: {
    tabIndex(newVal) {
      if (newVal == "1") {
        this.initEcharts();
      }
    },
  },
  mounted() {
    this.initDataList();
  },
  methods: {
    initDataList() {
      ToolHttpClient.post(`/action/action-table-infos/*`, {
        _dsId: this.$comStore.app.dsId,
      }).then((res) => {
        this.dataList = res;
      });
    },
    initEcharts() {
      if (this.dataList.length < 1) {
        return;
      }
      ToolEharts.initRanking(
        this.$refs.tableRows,
        this.dataList.map((item) => ({
          name: item.name,
          val: item.tableRows,
        })),
        { text: "表行数排行" }
      );

      ToolEharts.initRanking(
        this.$refs.dataLength,
        this.dataList.map((item) => ({
          name: item.name,
          val: item.dataLength,
        })),
        { text: "表数据长度排行" }
      );

      ToolEharts.initRanking(
        this.$refs.createTime,
        this.dataList.map((item) => ({
          name: item.name,
          val: new Date(item.createTime),
        })),
        { text: "表创建时间排行" }
      );
    },
  },
};
</script>

<style></style>
